/**
 * v-clickOutside
 * 点击元素外部事件
 * 接收参数：function类型，点击外面时返回true,点击内部时返回false
 */
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
  __handleClick__: any;
}
export const clickoutside: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== "function") {
      throw "callback must be a function";
    }
    el.__handleClick__ = function (e) {
      if (el.contains(e.target)) {
        console.log(false, "side1");
        binding.value(false);
      } else {
        console.log(false, "side2");

        binding.value(true);
      }
    };
    document.addEventListener("click", el.__handleClick__);
  },
  beforeUnmount(el: ElType) {
    document.removeEventListener("click", el.__handleClick__);
  }
};
